<!DOCTYPE html>
<html>
  <head>
    <title>DARTENDO</title>
    <style type="text/css">
    
      body {
        font-family: sans-serif;
      }

      .container {
        width: 800px;
        height: 760px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        text-align: center;
      }

      .container h1 {
        position: relative;
        top: 10px;
        font-size: 36pt;
        
        color: red;
        display: inline-block;
        padding: 0 15px 0 15px;
        border: 10px solid red;
        border-radius: 30px;
        background-color: white;

        z-index: 4;
      }

      .container h5 {
        position: absolute;
        top: 100px;
        width: 600px;
        left: 100px;
        font-size: 14pt;
        text-align: center;
        
        color: red;
        display: block;
        padding: 5px 15px 5px 15px;
        border: 5px solid red;
        border-radius: 30px;
        background-color: white;

        z-index: 4;
      }

      #tv {
        position: absolute;
        left: -100px;
        top: -150px;
        z-index: 3;
        width: 1000px;
        height: 1000px;
      }

      #webGlCanvas {
        position: absolute;
        left: 85px;
        top: 270px;
        height: 400px;
        width: 520px;
        z-index: 2;
        background-color: #222;
      }
    
      #fps_counter {
        font-family: monospace;
        color: #AAAAAA;
        position: absolute;
        left: 40px;
        top: 40px;
        width: 64px;
        height: 24px;
        padding-top: 3px;
        text-align: center;
        z-index: 6;
      }

      #menu {
        position: fixed;
        bottom: -20.5ex;
        z-index: 5;
        width: 98%;
      }
            
      #roms-label {
        padding: 2px 4px 2px 4px;
        border: 0.5ex solid #ddd;
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
        background-color: #ddd;
        box-shadow: 5px 5px 5px #888;      
        width: 10em;
        cursor: pointer;
      }
      
      #roms-content {
        border-left: 0.5ex solid #ddd;
        border-right: 0.5ex solid #ddd;
        border-top: 0.5ex solid #ddd;
        box-shadow: 5px 5px 5px #888;
      }

      .roms-drag-in {
        background-color: #cfc;
      }
      
      .roms-drag-out {
        background-color: #eee;
      }

      #roms-content-left {
        height: 20ex;
        width: 20em;
        float: left;
        padding: 2px 4px 2px 4px;
        border-right: 0.5ex solid #ddd;
      }

      #roms-content-right {
        height: 20ex;
        margin-left: 21em;
        padding: 2px 4px 2px 4px;
      }
    </style>
  </head>
  <body>
    <div class="container">
    <div class="fps" id="fps_counter">
    </div>
      <h1>DARTENDO</h1>
      <h5>Up: <span style="color:blue;">w</span> Left: <span style="color:blue;">a</span> Down: <span style="color:blue;">s</span> Right: <span style="color:blue;">d</span> A: <span style="color:blue;">k</span> B: <span style="color:blue;">j</span> Select: <span style="color:blue;">m</span> Start: <span style="color:blue;">Enter</span></h5>
      <img id="tv" src="tv.png"></img>
      <canvas id="webGlCanvas" width="256" height="240"></canvas>
    </div>

    
    <div id="menu">
      <div id="roms-label">
        roms
      </div>
      <div id="roms-content" class="roms-drag-out">
        <div id="roms-content-left">
        <p>
          Select a ROM or drag one into this area<br>
          <input type="file" id="input-file" />
        </p>
        <p>
          Current ROM: <span id="name"></span><br>
          File Size: <span id="size"></span><br>
        </p>
        </div>
        <div id="roms-content-right">
          This area is reserved for a list of ROMs stored in the HTML5 IndexedDB.
        </div>
      </div>
    </div>

    <script type="application/dart" src="dartendo.dart"></script>
    <script src="packages/browser/dart.js"></script>
    <!--
    <script type="text/javascript">
      var script = document.createElement("script");
      script.setAttribute("type", "application/dart");
      script.setAttribute("src", "dartendo.dart");

      /* Workaround for performance issue, from jmesserly@google.com
         "The bug was that we were causing CanvasPixelArray indexing 
          performance to become terrible. :)" 
       */
      script.onload = function() {
        $dynamic("$index").CanvasPixelArray = function($0) {
          return this[$0];
        };
        $dynamic("$setindex").CanvasPixelArray = function($0, $1) {
          return this[$0] = $1;
        };
        Float32Array.prototype.$index = function($0) {
          return this[$0];
        };
        Float32Array.prototype.$setindex = function($0, $1) {
          return this[$0] = $1;
        };
        Float64Array.prototype.$index = function($0) {
          return this[$0];
        };
        Float64Array.prototype.$setindex = function($0, $1) {
          return this[$0] = $1;
        };
        Int16Array.prototype.$index = function($0) {
          return this[$0];
        };
        Int16Array.prototype.$setindex = function($0, $1) {
          return this[$0] = $1;
        };
        Int32Array.prototype.$index = function($0) {
          return this[$0];
        };
        Int32Array.prototype.$setindex = function($0, $1) {
          return this[$0] = $1;
        };
        Int8Array.prototype.$index = function($0) {
          return this[$0];
        };
        Int8Array.prototype.$setindex = function($0, $1) {
          return this[$0] = $1;
        };
        Uint16Array.prototype.$index = function($0) {
          return this[$0];
        };
        Uint16Array.prototype.$setindex = function($0, $1) {
          return this[$0] = $1;
        };
        Uint32Array.prototype.$index = function($0) {
          return this[$0];
        };
        Uint32Array.prototype.$setindex = function($0, $1) {
          return this[$0] = $1;
        };
        Uint8Array.prototype.$index = function($0) {
          return this[$0];
        };
        Uint8Array.prototype.$setindex = function($0, $1) {
          return this[$0] = $1;
        };
      };

      document.body.appendChild(script);
    </script>
    <script type='text/javascript'
        src='http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js'>
    </script>
    -->
  </body>
</html>
